<template>
  <custom-container class="retain-page">
    <custom-container-header no-spacing>
      <div class="retain-page__title">
        用户留存率
        <el-popover
          placement="bottom"
          width="380"
          :offset="100"
          trigger="click">
          <div class="retain-page__tip">
            <div class="retain-page__tip-title">什么是登录用户留存？</div>
            <div class="retain-page__tip-content">
              登录用户留存是指某个时间新增的用户，经过一段时期后，仍在登录我们产品的用户。该指标可以用来掌握用户的粘性及忠诚度。<br/>
              登录用户留存定义：有登录的用户
            </div>
            <div class="retain-page__tip-title">登录用户留存率</div>
            <div class="retain-page__tip-content">例子: <br>
              10月1号新注册100个会员，10月2号有80个人登录，10月3号有70个人登录则10月2号登录留存率80%，10月3号登录留存率70%
            </div>
          </div>
          <div class="retain-page__tip-icon" slot="reference" @click="visible = !visible">?</div>
        </el-popover>
      </div>
    </custom-container-header>
    <custom-container-body>
      <el-form :model="filters" ref="form" :disabled="loading"
               inline size="medium"
               class="width-100"
      >
        <el-form-item label="域名：">
          <el-select v-model="filters.domain" placeholder="请选择域名">
            <el-option
              v-for="info in cDomainList"
              :key="info.domain"
              :label="info.cDomain"
              :value="info.domain">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="float-right">
          <custom-button-group v-model="filters.type"
          >
            <custom-button label="num">
              留存用户数
            </custom-button>
            <custom-button label="percent">
              留存率
            </custom-button>
          </custom-button-group>
        </el-form-item>
      </el-form>

      <retain-table :type="filters.type" :loading="loading" :table-data="cTableData"></retain-table>
      <div class="el-pagination-container">
        <el-pagination
          bordered
          :page-sizes="pageSize"
          :disabled="loading"
          @size-change="localGridSizeChange" @current-change="localGridCurrentChange"
          :current-page="filters.page" :page-size="filters.size"
          :total="tableData.total">
        </el-pagination>
      </div>
    </custom-container-body>

    <custom-container-header no-spacing>
      <el-form :disabled="loading"
               inline size="medium"
               class="width-100"
      >
        <div class="retain-page__title">
          留存率图表
          <el-form-item class="float-right">
            <custom-button-group v-model="chartFilters.time"
            >
              <custom-button :label="0">
                1天后
              </custom-button>
              <custom-button :label="2">
                3天后
              </custom-button>
              <custom-button :label="6">
                7天后
              </custom-button>
              <custom-button :label="8">
                14天后
              </custom-button>
            </custom-button-group>
          </el-form-item>
        </div>
      </el-form>
    </custom-container-header>
    <custom-container-body>
      <retain-line :list="cChartList"></retain-line>
    </custom-container-body>
  </custom-container>
</template>

<script>
  import RetainTable from './retain-table.vue';

  import {grid} from '@/build';

  import {proxyInfoApi as domainListApi} from "@/services/api/promotion";

  import {retentionUserApi as getApi} from "@/services/api/home";
  import RetainLine from './retain-line';

  export default {
    name: 'retain-page',

    mixins: [grid],

    components: {
      RetainLine,
      RetainTable,
    },

    data() {
      return {
        filters: {
          date: _.toTimestamp({
            start: [-31, 'day'],
            end: [-1, 'day'],
          }),
          domain: undefined,
          page: 1,
          size: 7,
          type: 'percent',
        },
        chartFilters: {
          time: 0,
        },
        domainList: [],

        tableData: {
          list: [],
          total: 0,
        },
      };
    },
    methods: {},

    watch: {
      'filters.domain': {
        handler() {
          this.gridSearch();
        },
      },
    },

    computed: {
      cDomainList() {
        return [{domain: undefined, cDomain: '全部'}, ..._.map(this.domainList, (domainInfo) => {
          return {
            ...domainInfo,
            cDomain: domainInfo.domain
            // cDomain: _.toDomain(domainInfo.domain)
          };
        })];
      },
      cChartList() {
        return _.map(this.tableData.list, info => {
          return {
            date: info.date,
            day: info.num[0],
            num: _.result(info.num, this.chartFilters.time)
          };
        });
      }
    },

    mounted() {
      this.bindGet(domainListApi, 'domainList', {
        action: 'getDomainList',
        format: data => {
          return data.list;
        }
      });

      this.bindGet(getApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        format: (data) => {
          return {
            list: _.map(data.reverse(), info => {
              return {
                date: info.date,
                day: info.num[0],
                num: _.drop(info.num)
              };
            }),
            total: _.size(data)
          };
        }
      });

      this.getAll();
    }
  };
</script>

<style lang="scss">
  @include b(retain-page) {

    @include e(title) {
      margin-bottom: 30px;
      font-size: 24px;
      font-weight: bold;
      color: rgba(32, 33, 36, 1);
      margin-right: 12px;
    }

    @include e(tip-icon) {
      width: 24px;
      height: 24px;
      background: rgba(243, 243, 243, 1);
      color: $--color-black-4;
      font-size: $--font-size-x-large;
      border-radius: $--border-radius-circle;
      text-align: center;
      line-height: 24px;
      display: inline-block;
      cursor: pointer;
      vertical-align: top;
      margin-top: 4px;
    }
    @include e(tip) {
      padding: 10px 8px;
      box-sizing: border-box;
    }
    @include e(tip-title) {
      font-size: $--font-size-small;
      font-weight: bold;
      margin-bottom: 4px;
    }
    @include e(tip-content) {
      font-size: $--font-size-small;
      line-height: 22px;
      margin-bottom: 12px;

      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
</style>
